<template>
  <div>
    <!--
        @save: 按下 ctrl + s 时触发
        @change: 当值发生改变时 触发
    -->
    <mavon-editor
      @save="saveDoc"
      @change="updateDoc"
      @imgAdd="imgAdd"
      @imgDel="imgDel"
      ref="editor"
      v-model="doc">
    </mavon-editor>
  </div>
</template>

<script>
/* eslint-disable */
import api from '@/assets/js/api'
import {mavonEditor} from "mavon-editor";
import "mavon-editor/dist/css/index.css";

export default {
  props: {
    html: ''
  },
  name: "Create",
  components: {mavonEditor},
  data () {
    return {
      doc: this.html
    };
  },
  methods: {
    updateDoc (markdown, html) {
      // 此时会自动将 markdown 和 html 传递到这个方法中
      // console.log("markdown内容: " + markdown);
      // console.log("html内容:" + html);
      this.$emit('change', html)
    },
    saveDoc (markdown, html) {
      // 此时会自动将 markdown 和 html 传递到这个方法中
      console.log("markdown内容:" + markdown);
      console.log("html内容:" + html);
      this.props.html = html
      this.$emit('change', html)
    },
    imgAdd (pos, $file) {
      console.log('触发 imgadd')
      api.upload($file, (res) => {
        console.log(res.d)
        // return
        /**
         * $vm 指为mavonEditor实例，可以通过如下两种方式获取
         * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
         * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
         */
        let $vm = mavonEditor
        this.$refs.editor.$img2Url(pos, api.getUrl() + res.d);
      })

    },
    imgDel () {

    }
  }
}
</script>

<style scoped>

</style>
